<template>
  <div class="containerDiv">
    <el-form :inline="true"  >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item label="自动生成波次">
            <el-switch  v-model="status" @click="updateStatus" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="createBatch">生成波次</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>备注说明:开启自动生成波次后，每隔20分钟计算一次波次订单</div>
    <el-form :inline="true" style="margin-top: 10px;" >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item label="分类订单总数:">
             {{orderData.orderAllocationNum}}单
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="生成时间:">
            {{orderData.createTime}}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="单品订单:">
            {{orderData.orderSingleNum}}单
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="多品订单:">
            {{orderData.orderMultipleNum}}单
          </el-form-item>
        </el-col>
      </div>
    </el-form>

    <div style="width: 100%;height: 600px;" id="myecharts"></div>
  </div>
</template>

<script setup>

import * as echarts from 'echarts';
import {onMounted} from "vue";
import {getBatchConfigGetInfo, getNewBatchList, saveBatchConfigUpdateStatus, saveBatchCreateBatch} from "@/api/scApi";

const { proxy } = getCurrentInstance();
let status=ref(false) //自动生成波次
let configId =ref("")//自动生成波次的id
onMounted(()=>{
  getBatchConfig()
  getList()
})

function loadEcharts(data){
  var chartDom = document.getElementById('myecharts');
  var myChart = echarts.init(chartDom);
  document.getElementById("myecharts").removeAttribute('_echarts_instance_');
  let dataSeries=[]
  if(data){
    dataSeries=[
      data.singleNum1,data.singleNum2,data.singleNum3,data.singleNum4,data.singleNum5,
      data.productsNum2,data.productsNum3,data.productsNum4,data.productsNum5,
      data.multipleNumMore10,data.multipleNumMore6,data.multipleNumMore4,data.multipleNumMore2
    ]
  }else{
    dataSeries=[0,0,0,0,0,0,0,0,0,0,0,0,0]
  }


  var option;
  option = {
    xAxis: {
      type: 'category',
      data: ['单品1件', '单品2件', '单品3件', '单品4件', '单品5件', '单品>5件', '2品','3品','4品','5品','多品>10件','多品>6','多品>4','多品>2']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: dataSeries,
        type: 'bar'
      }
    ]
  };
  option && myChart.setOption(option);
}
//获取自动生成波次配置
function getBatchConfig(){
  getBatchConfigGetInfo().then(res=>{
    status.value =res.data.status===0?true:false
    configId.value= res.data.configId
  })
}
function updateStatus(){
  saveBatchConfigUpdateStatus({status:status.value?0:1,configId:configId.value}).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess('更新成功!')
    }
  })
}
//生成波次
function createBatch(){
  saveBatchCreateBatch().then(res=>{
    proxy.$modal.msgSuccess('生成成功!')
    getList()
  })
}
let orderData=ref({})
function getList(){
  getNewBatchList().then(res=>{
    orderData.value=res.data ||{}
    loadEcharts(res.data)
  })
}
</script>

<style scoped lang="scss">
.containerDiv {
  padding: 0 20px;
  height: calc(100vh - 160px);
}
</style>